import * as echarts from 'echarts';
import { useEffect,useRef } from 'react';

const BarEcharts = ({title})=>{
    const echartRef = useRef(null);
    useEffect(()=>{
        var chartDom =echartRef.current;
        var myChart = echarts.init(chartDom);
        var option;
        option = {
            title: {
              text:title,
              left: 'left'
            },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: 'Direct',
              type: 'bar',
              barWidth: '60%',
              data: [10, 52, 200, 334, 390, 330, 220]
            }
          ]
        };
        option && myChart.setOption(option);
    },[title])
    return(
            <div ref={echartRef} style={{width:'100%',height:'400px'}}></div>
    )
}

export default BarEcharts;